{% extends "admin.html" %}

{% block jsfuncs %}


del_cat = function(cat_id) {
	var log = $('load_img').setStyles({'display':'inline'});
	
	var req = new Request.HTML({ 	url: '/admin/categories/del',
	 									  	method: 'post',
										  	evalScripts : true,
										  	data: 'id=' + cat_id,
											onComplete: function(e) {
												log.setStyles({'display':'none'});
											}
										}).send();
	return false;
	
};

new_cat = function (cat_id,cat_name) {
	
	var el = new Element('tr', {'id': cat_id});
	var td_link = new Element('td', {'class': 'td_button'}).injectInside(el);
	var link = new Element('a', {
				'events': {
							'click': function(){
 									del_cat(cat_id);
									}
							},
				'href': '#'
				}).set('text','Del').injectInside(td_link);
	
	var nom = new Element('td', {'class': 'cat_name'}).set('text',cat_name).injectAfter(td_link);
	
	$('cat_table').getElement('tbody').adopt(el);
		
};

$('cat_form').addEvent('submit', function(e) {
	new Event(e).stop();
	var log = $('load_img').setStyles({'display':'inline'});
   this.set('send',{
		evalScripts: true,
		onComplete: function() {
			log.setStyles({'display':'none'});
		}
	});
	this.send();
});

{% endblock %}

{% block content %}
	<h3>Category list</h3>
	<div id="cat_list">
	<table id="cat_table">
	{% if categories.count %}
	
	
		{% for category in categories %}
			<tr id="{{category.key}}">
				<td class="td_button"><a href="#" onclick="javascript:del_cat('{{category.key }}');">Del</a></td>	
				<td class="cat_name">{{ category.category_name }}</td>
			</tr>
		{% endfor %}
	
	{%else%}
		<h4>There are no categories</h4>
	{% endif %}
	</table>
	</div>
	
	<h3>New Category</h3>
	<div id="new_category">
		<form action="/admin/categories/new" method="post" id="cat_form" accept-charset="utf-8">
			<input type="text" name="category_name" value="" id="name">
			<input type="submit" value="New"><img src="/static/images/loading.gif" style="display:none;" id="load_img" />
		</form>
	</div>
	
{% endblock %}

